<template>
	<view class="container" style="background-color: white;">
		
		<!-- <scroll-view scroll-x class="scroll-x" :scroll-with-animation="isAni" @scrolltolower="scrolltolower" :scroll-left="scrollLeft" @scroll="scroll">
			<view class="flex kj-box">
				<view class="item flex flex-direction"  style="display: flex;flex-direction: column;" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
					<view class="show">
						<image :src="item.thumb" class="img"></image>
						<view class="name">{{item.name}}</view>
					</view>
					<view class="flex flex-direction justify-between flex-sub">
						<view class="price flex">
							<text class="text-price">{{item.shop_price}}</text>
							<text class="text-through">¥{{item.market_price}}</text>
						</view>
						<block v-if="item.stock">
							<view class="btn" @click.stop="kanjia(item)" v-if="!item.is_bargain">抢购</view>
						</block>
						<block v-else>
							<view class="btn over-btn">已抢光</view>
						</block>
					</view>
				</view>
			</view>
		
		</scroll-view> -->


        <!-- 头部 --> 
		<!-- @click="isokdingwei" -->
		<view style="margin-top: 96rpx;display: flex;margin-bottom: 50rpx;" @click="isokdingwei">
			<image src="@/static/location.png" style="width: 45rpx;height: 45rpx;"></image>
			<text style="font-size: 28rpx;color: #333333;margin-left: 18rpx;">{{ weizhi }}</text>
			<!-- <text style="font-size: 28rpx;color: #333333;margin-left: 18rpx;" v-if="editStatus">{{ city }}</text>
			<text style="font-size: 28rpx;color: #333333;margin-left: 18rpx;" v-else>请选择位置</text> -->
		</view>
		<!-- <view class="header-view">首页</view> -->
		<view style="display: flex;align-items: center;margin-bottom: 30rpx;" @tap="navToSearch">
			<view class="search-view" style="display: flex;justify-content: space-between;">
				<view style="display: flex;">
					<image class="search-image-view" src="../../../../static/images/search-icon.png"  style="margin-left: 15rpx;"></image>
					<view>搜索</view>
				</view>	
				<view class="search-btn">搜索</view>
			</view>
			
		</view>
		<!-- 广告位 -->
		<view v-if="banners.length > 0">
			<swiper style="width: 100%;height:450rpx;" :autoplay="true" interval="5000" :circular="true" duration="500">
				<swiper-item v-for="(item, index) in banners" :key="index" @click="handleJump" :data-url="item.href"
					tyle="width: 100%;height:900rpx;">
					<image :src="item.thumb" mode="aspectFill" tyle="width: 100%;height:900rpx;"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 分类+列表 -->
		<!-- <view style="padding: 30rpx;">
			<view style="display: flex;justify-content: space-between;">

				<view style="display: flex;">
					<image src="../../../../static/home/weizhi.png" style="width: 40rpx;height: 40rpx;"></image>
					<view style="width: 16rpx;">

					</view>
					<view v-if="isTrue" style="font-size: 28rpx;color: #333333 ;">
						{{city}}
					</view>
					<view v-else style="font-size: 28rpx;color: #333333 ;" @click="goLcation">
						{{"请选择位置"}}
					</view>
				</view>
				<view style="display: flex;">

					<image src="../../../../static/home/search.png" style="width: 40rpx;height: 40rpx;"
						@tap="navToSearch"></image>
					<view style="width: 30rpx;">

					</view>
					<image src="../../../../static/home/corn.png" style="width: 40rpx;height: 40rpx;"
						@click="handleJump" data-url="/pages/user/coupon/get_coupon/index"></image>
				</view>
			</view>
		</view> -->
		<!--  -->
		<!-- <view style="display: flex;justify-content: space-around;">
			<view class="two-list" @click="toClassify(0)">
				<image src="https://localelife.chunchuangkeji.cn/h5img/images/home_bao.png"
					style="width:120rpx ;height: 100rpx;"></image>
				<text>爆款推荐</text>
			</view>
			<view class="two-list" @click="toClassify(1)">
				<image src="https://localelife.chunchuangkeji.cn/h5img/images/home_new.png"
					style="width:120rpx ;height: 100rpx;"></image>
				<text>最新发布</text>
			</view>
		</view> -->

		<scroll-view class="scroll-view_H" scroll-x="true">
			<view style="padding: 30rpx 0;">
				<view class="scroll-view-list">
					<view class="scroll-view-item" @click="toClassify(0,cateListsGory[0].id)">
						<image class="scroll-view-image" src="@/static/images/chongwu.png" mode=""></image>
						<view class="scroll-view-text">{{cateListsGory[0].name}}</view>
					</view>
					<view class="scroll-view-item" @click="toClassify(1,cateListsGory[1].id)">
						<image class="scroll-view-image" src="@/static/images/jiaoyu.png" mode=""></image>
						<view class="scroll-view-text">{{cateListsGory[1].name}}</view>
					</view>
					<view class="scroll-view-item" @click="toClassify(2,cateListsGory[2].id)">
						<image class="scroll-view-image" src="@/static/images/shanglv.png" mode=""></image>
						<view class="scroll-view-text">{{cateListsGory[2].name}}</view>
					</view>
					<view class="scroll-view-item" @click="toClassify(3,cateListsGory[3].id)">
						<image class="scroll-view-image" src="@/static/images/yanglao.png" mode=""></image>
						<view class="scroll-view-text">{{cateListsGory[3].name}}</view>
					</view>
					<view class="scroll-view-item" @click="handleToUplingjuan">
						<image class="scroll-view-image" src="@/static/images/lingjuan.png" mode=""></image>
						<view class="scroll-view-text">领卷中心</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 分类 -->
		<!-- <view class="tabs" :style="{top: `calc(-176rpx);`}" v-if="navList.length > 0">
			<fu-tab :tabs="navList" :lineShow="false" node-title="name" @change="tabClick" node-key="id"
				inactive-color="#999" activeColor="#333" size="28" activeSize="32" line2Show bottom="8"
				:current="typeId" current-key="id" ref="tabs"></fu-tab>
			<view class="right flex" @click="showDrawer=true">
				<image src="https://localelife.chunchuangkeji.cn/h5img/images/001.png" class="yinying"></image>
				<view class="shaixuan flex align-center">
					<image src="../../../../static/home/filter.png"></image>
				</view>
			</view>
		</view> -->
		<view class="store-title">店铺列表</view>
		<!-- 商品列表 -->
		<!-- <view style="display: flex;flex-wrap:wrap;padding: 30rpx;justify-content: space-between;">
			<view style="width: 320rpx;margin-bottom: 15rpx;" v-for="(item,index) in lists" :key="index">
				<goods-block :info="item" @kanjia="kanjia(item,index)" @onClick="browseClick(item,index)"
					:icode='icode'></goods-block>
			</view>
		</view> -->
		
		<view class="store-item" v-for="(item,index) in shop_list" :key="index">
			<image class="store-image"  :src="item.store_logo" mode="aspectFill"></image>
			<view style="width: 20rpx;">
				
			</view>
			<view style="display: flex;justify-content: space-between;width: 550rpx;align-items: center;">
				<view style="display: flex;flex-direction:column;height: 140rpx;align-items: start;justify-content: space-between;">
					<text style="font-weight: bold;font-size: 30rpx;">{{item.store_name}}</text>
					<view style="font-size: 24rpx;color: #666666;display: flex;align-items: center;">
					<image src="@/static/address.png" style="width: 24rpx;height: 24rpx;" alt="" />
					<view style="width: 13rpx;">
											
					</view>
					<text style="width:300rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{item.store_district_name?item.store_district_name:"高新区"}}{{item.store_address}}</text>						
					</view>
					
					<view style="font-size: 24rpx;color: #666666;display: flex;align-items: center;">
					<image src="@/static/time.png" style="width: 24rpx;height: 24rpx;" alt="" />
					<view style="width: 13rpx;">
						
					</view>
					<text style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{item.business_hours}}</text>
					</view>
				</view>
				<view @click="goShop(item)" style="border-radius:15rpx;background-color: #FFE6EE;color: white;width: 160rpx;height: 50rpx;font-size: 24rpx;padding: 16rpx 14rpx;display: flex;align-items: center;justify-content: space-between;">
					<text style="color: #FE4B88;">进入店铺</text>
					<view style="width: 8rpx;">
						
					</view>
					<image src="@/static/next.png" style="width: 24rpx;height: 24rpx;"></image>
				</view>
			</view>
		</view>
		<fu-empty-ui v-if="shop_list.length == 0"></fu-empty-ui>
		<uni-load-more :status="status" v-if="shop_list.length > 5"></uni-load-more>

		<fu-popup v-model="showDrawer" mode="right" :safe-area-inset-bottom="true" :border-radius="0" width='70%'>
			<view class="popup " :style="[{paddingTop: StatusBar+'px'}]">
				<scroll-view class="pop-content" scroll-y>
					<view class="title" style="font-size: 32rpx;margin-bottom: 30rpx;">
						{{i18n['筛选']}}
					</view>
					<view class="title flex align-center justify-between" v-if="serviceList.length != 0">
						<text>筛选</text>
						<image src="https://localelife.chunchuangkeji.cn/h5img/images/arrow-b.png" class="arrow-b">
						</image>
					</view>
					<view class='service serviceItem' v-if='serviceList.length !=0'>
						<text v-for='(item, index) in serviceList' :key="index"
							class="list-item ml-4 padding-tb-xs padding-lr text-sm text-333 radius"
							:class="[{'active2': goods_type == item.type}]"
							@click='Choice(item, 2)'>{{item.name}}</text>
						<text></text>
					</view>
					<view class="brand title flex align-center justify-between" v-if='typeList.length != 0'>
						<text>分类</text>
						<image src="https://localelife.chunchuangkeji.cn/h5img/images/arrow-b.png" class="arrow-b">
						</image>
					</view>
					<view class='service serviceItem' v-if='typeList.length !=0'>
						<!-- <text v-for='(item, index) in typeList'
							:key="index"
							class="list-item ml-4 padding-tb-xs padding-lr text-sm text-333 radius"
							:class="[{'active2': typeId == item.id}]" @click='Choice(item, 1)'>{{item.name}}</text> -->
						<text></text>
					</view>
				</scroll-view>
				<view class="action-box">
					<view class="flex pop-btn">
						<view class="action reset" @tap.stop="resetPop">{{i18n['重置']}}</view>
						<view class="action confirm" @tap.stop="confirmPop">{{i18n['确定']}}</view>
					</view>
				</view>
			</view>
		</fu-popup>

		<!-- 为你推荐 -->
		<!-- <fu-waterflow-one name="fu-waterflow" ref="guess"></fu-waterflow-one> -->
		<!-- 未登录 -->
		<fu-nologin v-if="!isLogin"></fu-nologin>
		<!-- 网络监测 -->
		<fu-notwork></fu-notwork>
		<!-- 优惠券 -->
		<!-- <ben-coupon ref="benCoupon"></ben-coupon> -->
		<!-- 升级弹窗 -->
		<app-update auto></app-update>
		<fu-popup mode="center" v-model="showMode">
			<view class="flex flex-direction align-center">
				<view class="model-box">
					<swiper style="width: 100%;height: 100%;" :autoplay="false" interval="3000" :circular="true"
						duration="500">
						<swiper-item v-for="(item, index) in adImgs" :key="index">
							<view class="flex align-center justify-center" style="width: 100%;height: 100%;">
								<image :src="item.thumb" mode="aspectFit" @click="handleJump" :data-url="item.href">
								</image>
							</view>
						</swiper-item>

					</swiper>
					<image src="https://localelife.chunchuangkeji.cn/h5img/images/close.png"
						class="block-44 margin-top-16" @click="showMode=false" mode="widthFix"
						style="position: absolute;bottom:0rpx;left:50%;transform:translateX(-50%);"></image>
				</view>
			</view>
		</fu-popup>
		<!-- #ifdef APP-PLUS || H5 -->
		<fu-popup mode="center" v-model="addressShow">
			<view class="flex flex-direction align-center">
				<view class="address-box">
					<view class="address-content">
						开启定位权限，显示附近商品，享受完整服务
					</view>
					<view class="address-bent flex">
						<view class="address-text" style="border-right: 1rpx solid #eee;" @click="addressShow = false">
							取消</view>
						<view class="address-text" @click="isokdingwei">开启</view>
					</view>
				</view>
			</view>
		</fu-popup>
		<!-- #endif -->
		<fu-popup mode="center" v-model="addressTypeShow">
			<view class="flex flex-direction align-center">
				<view class="address-box">
					<view class="address-content">
						位置信息已更新，是否切换为当前定位
					</view>
					<view class="address-bent flex">
						<view class="address-text" style="border-right: 1rpx solid #eee;"
							@click="addressTypeShow = false">取消</view>
						<view class="address-text" @click="affirmAddress">确认</view>
					</view>
				</view>
			</view>
		</fu-popup>
		<!-- 返回顶部 -->
		<goTop :isShow='isShow' v-if="totalSize > 1"></goTop>
	</view>
</template>
<script>
	import FuGrid from '../../components/fu-grid/fu-grid.vue';
	import FuSwiper from '../../components/fu-swiper/fu-swiper.vue';
	import FuAdvert from '../../components/fu-advert/fu-advert.vue';
	import FuNologin from '../../components/fu-nologin/fu-nologin.vue';
	import BenCoupon from '../../components/ben-coupon/ben-coupon.vue';
	import GoodsBlock from '@/components/fu-goods-block-four/index.vue';
	import amapFile from '@/libs/amap-wx.js';
	// 返回首页弹窗
	import goTop from '../../components/goTop/index.vue'
	export default {
		name: 'shopindex',
		components: {
			FuGrid,
			FuSwiper,
			FuAdvert,
			FuNologin,
			BenCoupon,
			GoodsBlock,
			goTop,
		},
		data() {
			return {
				weizhi:"获取位置",
				totalSize: 0, // 悬浮按钮总页码
				whetherAddress: false, //是否更新位置
				addressTypeShow: false, //更换地址弹出
				addressShow: false,
				showBar: false, // 显示悬浮搜索栏
				searchText: '', //搜索框默认值
				banners: [], // 轮播图
				bgColor: this.$store.state.themeColor, // 头部默认颜色
				animationData: {}, // 颜色渐变动画
				couponModel: false, // 优惠券弹窗
				couponInfo: null,
				messageNum: 0,
				home_intro: '', //小标题
				hbList: [],
				videoUrl: '',
				topImg: '',
				isShow: true,
				height: '',
				navList: [],
				city: '位置',
				latitude: 34.738038,
				longitude: 113.643589,
				showDrawer: false,
				serviceList: [{
					type: 2,
					name: '爆款推荐'
				}, {
					type: 3,
					name: '离我最近'
				}, {
					type: 4,
					name: '最新发布'
				}], // 筛选
				typeList: [], // 分类
				editStatus: false,
				typeId: 0,
				status: 'more',
				page: 1,
				size: 10,
				lists: [],
				isInit: false,
				goods_type: 0,
				goodsList: [],
				myAmapFun: null, // 高德地图实例
				address: '位置',
				scrollLeft: 0, //滚动距离
				scrollTimer: null, //滚动定时器
				scrollStartTime: 0, //滚动开始时间
				scrollEndTimer: null, //滚动结束延迟定时器
				isAni: true, //是否开启动画
				showMode: false,
				adImgs: [],
				dataMessage: {}, //地图选点
				is_show: '0',
				icode: '',
				cateListsGory:[] ,// 分类列表
				shop_list: [],//店铺列表
				page: 1, //当前页数
				list_rows: 10, //每页条数00
				status: 'more', //数据加载状态
			};
		},
		computed: {
			isLogin() {
				return this.$store.getters.isLogin;
			},
			location: {
				get() {
					return this.$store.getters.location;
				},
				set() {}
			},
			userInfo() {
				return this.$store.getters.userInfo;
			},
		},
		watch: {
			// 监听位置变化
			'$store.state.cityId'(newLocation) {
				this.refresh();
			},
			isLogin(newVal) {
				if (newVal) {
					// this.$refs.benCoupon && this.$refs.benCoupon.getCoupon();
					// this.$refs.benRedEnvelope && this.$refs.benRedEnvelope.getRedEnvelope();
				}
			}
		},

		onLoad(options) {
			this.getGoodsList()
			// #ifdef APP-PLUS
			uni.setTabBarItem({
				index: 1,
				visible: false
			})
			this.is_show = '1'
			this.getHiddenInterface()
			// #endif
			console.log(options, '邀请')
			if (options.scene) {
				let scene = decodeURIComponent(options.scene)

				let inviteCode = scene.slice(2)
				console.log(scene, '的的地方方法')

				if (inviteCode) {
					uni.setStorageSync('COMMONINVITECODESYNC', inviteCode);
					// this.postVerifyInviteCode(inviteCode)
				}

			}

			if (options.page_type == 'share') {
				if (options.invite_code) {
					// this.postVerifyInviteCode(options.invite_code)
					uni.setStorageSync('COMMONINVITECODESYNC', options.invite_code);
				}
			}

			// #ifdef APP-PLUS
			plus.navigator.closeSplashscreen();
			// #endif
			uni.setNavigationBarColor({
				frontColor: '#ffffff', //文字颜色
				backgroundColor: '#007AFF' //底部背景色
			});
			// // #ifdef MP-WEIXIN
			// this.myAmapFun = new amapFile.AMapWX({ key: '24bd3e9cce29ec3d7ff29ebb3563f17a' });
			// // #endif
			// // #ifdef APP-PLUS || H5
			// this.myAmapFun = new amapFile.AMapWX({ key: '8fe19664acf62b20dfc94e87433c7624' });
			// // #endif
			this.myAmapFun = new amapFile.AMapWX({
				key: '304c94f1cdc050e10738829384500fdb'
			});
			let location = this.$store.state.location;
			// #ifdef APP-PLUS || H5
			let isGet = uni.getStorageSync('isGetLocation')
			console.log('isGet------', isGet);
			if (!isGet || isGet == 'undefined' || isGet == 'no') {
				this.addressShow = true
			} else if (isGet == 'yes') {
				console.log(111);
				if (!location || !location.district) {
					console.log(222);
					this.autoGetLocation()
				} else {
					this.address = this.location.addressDesc
					this.refresh();
				}
			}
			// #endif
			// #ifdef MP-WEIXIN
			if (!location || !location.district) {
				this.autoGetLocation();
			} else {
				this.address = this.location.addressDesc
				this.refresh();
			}
			// #endif
			console.log('111222333');
			this.loadData();
			this.getGlobalConfig();
			this.getFindData();
			this.getListData();
			this.changeColor([255, 101, 103]);
			this.startScroll();
			this.getAdImg();
			uni.$on('indexCity', res => { //修改城市重新获取商品
				this.address = res.city
				this.city = res.city
				console.log(res)
				this.editStatus = true
			})
			uni.$on('updateHomeData', res => {
				this.refresh();
				this.$forceUpdate();
			})
			uni.$on('updateHomeStatus', res => {
				this.lists.forEach(item => {
					if (item.id == res) {
						item.is_bargain = 1
					}
				})
				console.log(this.lists, 'lists')
				this.getGoodsList();
				this.$forceUpdate();
			})
			uni.$on('updataShopInfo', res => {
				console.log('详情砍价', res);
				this.lists.forEach(item => {
					if (item.id == res.id) {
						item.shop_price = res.price //商家价格
						item.click = res.click
						item.bargain = res.bargain
						console.log('被砍价商品', item);
					}
				})
				// console.log(this.lists, 'lists')
				// this.getGoodsList();
				// this.$forceUpdate();
			})

		},
		onReady() {
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('.img')
					.boundingClientRect(data => {
						// console.log("得到布局位置信息" , data);
					})
					.exec();
			});
		},
		onShow() {
			this.icode = this.userInfo && this.userInfo.invite_code || ''
			console.log('this.invite_code===', this.icode);
			// #ifdef APP-PLUS
			this.getHiddenInterface()
			// #endif
			this.height = uni.getSystemInfoSync().windowHeight;
			// let isGet = uni.getStorageSync('isGetLocation')
			//     if(isGet=='yes' &&   !this.editStatus){
			//        this.autoGetLocation()
			//     }
			console.log(this.height, '高度啊啊啊啊')
			// this.isShow = true
			if (this.isLogin) {
				this.$store.dispatch('getCartList');
				// this.getMessageNum();
				// this.$refs.benRedEnvelope && this.$refs.benRedEnvelope.getRedEnvelope();
			}
			// 更新秒杀数据
			this.$nextTick(function() {
				// this.$refs.seckill.init();
				this.$refs.seckill && this.$refs.seckill.refresh();
			})
			this.getConfig();
			let location = this.$store.state.location;
			if (location && location.district) {
				// this.refresh();
				this.getList()
				this.getGoodsList();
				this.$forceUpdate();
			}
			this.page = 1;
			this.status = 'more';
			this.shop_list = [];
			this.get_Shop_list();
			// this.getInfo()
		},
		onPullDownRefresh() {
			this.loadData();
			this.$refs.grid && this.$refs.grid.refresh();
			this.$refs.seckill && this.$refs.seckill.refresh();
			this.refresh();
			this.$refs.assemble && this.$refs.assemble.refresh();
			this.getListData();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom(e) {
			console.log('opopopopop')
			this.getList();
			this.get_Shop_list();
		},
		onPageScroll(e) {
			// console.log(e.scrollTop)
			this.showBar = e.scrollTop >= 900 ? true : false;
		},
		async onShareAppMessage(res) {
			console.log(res, 'hsaressss')
			let info = {
				title: '',
				path: '',
				imageUrl: ''
			};
			if (res.from == 'button') {
				let data = res.target.dataset.item;
				console.log(data, 'daaaaaa')
				uni.showLoading()
				await this.$api.post(global.apiUrls.post6406d647c5828, {
					goods_id: data.id,
					lng: this.location.longitude,
					lat: this.location.latitude,
				}).then(res => {
					uni.hideLoading()
					if (res.data.code == 1) {
						info.title =
							`原价¥${data.market_price},现价¥${data.shop_price}!【${data.name}】${data.store_name}`
						info.path =
							`/pages/goods/goodsdetail/goods-detail/index?goods_id=${data.id}&type=share&share_sign=${data.share_sign}&invite_code=${this.userInfo && this.userInfo.invite_code || ''}`
						// info.path = `/pages/goods/sharePages/sharePages?goods_id=${data.id}&type=share&share_sign=${data.share_sign}&invite_code=${this.userInfo && this.userInfo.invite_code || ''}`
						info.imageUrl = data.thumb
					} else {
						this.$message.info(res.data.msg)
						return false;
					}
				}).catch(() => {
					uni.hideLoading()
				})
			} else {
				info.path =
					`pages/tab/home/shopindex/index?page_type=share&invite_code=${this.userInfo && this.userInfo.invite_code || ''}`
			}
			if (info.path) {
				return info;
			}
		},
		onShareTimeline() {
			return {
				path: `pages/tab/home/shopindex/index?page_type=share&invite_code=${this.userInfo && this.userInfo.invite_code || ''}`
			}
		},
		onUnload() {
			uni.$off('indexCity')
			uni.$off('updateHomeData')
			uni.$off('updateHomeStatus')
		},
		methods: {
			goShop(item) {
				console.log(item)
				this.$urouter.navigateTo({
					url: '/pages/goods/shop/shop/index',
					params: {
						partner_id: item.member_id
					}
				});
			},
			// 店铺列表
			get_Shop_list() {
				if (this.status == 'noMore') return;
				
				let params = {
					page: this.page,
					list_rows: this.list_rows
				}
				this.$api.post(global.apiUrls.postShop_list,params)
					.then(res => {
						console.log('店铺列表', res.data);
						if (res.data.code == 1) {
							if (this.page == 1) this.shop_list = [];
							this.shop_list.push(...res.data.data.data);
							let num = this.list_rows;
							if (this.shop_list.length < res.data.data.total) {
								this.status = 'more';
								this.page++;
							} else {
								this.status = 'noMore';
							}
							uni.stopPullDownRefresh();
						} else {
							this.status = 'more';
							uni.stopPullDownRefresh();
						}
						this.$forceUpdate();
						console.log(this.shop_list)
					})
					.catch(err => {
						console.log('店铺列表ERROR: ', err);
					});
			},
			// 刷新
			refresh() {
				this.page = 1;
				this.status = 'more';
				this.shop_list = [];
				this.get_Shop_list();
			},
			// 跳转到领卷中心
			handleToUplingjuan(){
				uni.navigateTo({
					url:'/pages/user/coupon/get_coupon/index'
				})
			},
			toClassify(index,id) {
				console.log(index)
				console.log(id)
				uni.setStorageSync("index", index + 2)
				uni.setStorageSync("cid", id)
				uni.navigateTo({
					url: `/pages/tab/classify/classify?index=${index}`
				})
			},
			//确认更换位置
			affirmAddress() {
				this.whetherAddress = true
				this.autoGetLocation()
				this.addressTypeShow = false
			},
			getInfo() {
				this.$api.post(global.apiUrls.postGetUserInfo).then(res => {
					if (res.data.code == 1) {
						this.$store.commit('updateUserInfo', res.data.data);
					}
				}).catch(err => {})
			},
			// 上架隐藏
			getHiddenInterface() {
				this.$api.post(global.apiUrls.hiddenInterface, {
					code: 'is_show'
				}).then(res => {
					console.log('上架接口...', res);
					if (res.data.code == 1) {
						this.is_show = res.data.data
						if (res.data.data == 1) {
							uni.setTabBarItem({
								index: 1,
								visible: false
							})
						} else {
							uni.setTabBarItem({
								index: 1,
								visible: true
							})
						}
					}
				})
			},
			/**
			 * @func 定位地址
			 */
			getLocationAddress() {
				let _this = this;
				//#ifdef MP-WEIXIN
				uni.getSetting({
					success(res) {
						// 获取设置成功
						console.log(res.authSetting);
						if (!res.authSetting['scope.userLocation']) {
							// 如果没开启权限提示打开
							uni.openSetting({
								success(res) {
									// 打开成功，提示获取权限
									console.log(res.authSetting);
									uni.authorize({
										scope: 'scope.userLocation',
										success(res) {
											_this.chooseLocation();
										},
										fail(res) {
											console.log(res);
											this.$message.info(this.i18n['打开权限失败']);
										}
									});
								}
							});
						} else {
							_this.chooseLocation();
						}
					}
				});
				//#endif
				// #ifdef APP-PLUS || H5
				this.chooseLocation();
				// #endif
			},
			/**
			 * @func 地图选点
			 */
			chooseLocation() {
				let _this = this;
				uni.chooseLocation({
					success: res => {
						console.log(res, '地图');

						this.myAmapFun.getRegeo({
							location: res.longitude + ',' + res.latitude,
							success: data => {
								//成功回调
								console.log('sdk回调', data);
								let regeoData = data[0].regeocodeData.addressComponent;
								this.city = Array.isArray(regeoData.city) && regeoData.city
									.length == 0 ? regeoData
									.province : regeoData.city;
								let latitude = data[0].latitude;
								let longitude = data[0].longitude;
								this.weizhi = regeoData.city
								uni.setStorageSync('Current_City', this.city)
								this.address = data[0].desc
								_this.$store.commit('updataLocation', {
									province: regeoData.province,
									city: this.city,
									district: regeoData.district,
									addressDesc: data[0].desc,
									provinceCode: regeoData.adcode.substr(0, 2) + '0000',
									cityCode: regeoData.adcode.substr(0, 4) + '00',
									districtCode: regeoData.adcode + '',
									latitude: latitude,
									longitude: longitude
								});
								_this.location = {
									province: regeoData.province,
									city: this.city,
									district: regeoData.district,
									addressDesc: data[0].desc,
									provinceCode: regeoData.adcode.substr(0, 2) + '0000',
									cityCode: regeoData.adcode.substr(0, 4) + '00',
									districtCode: regeoData.adcode + '',
									latitude: latitude,
									longitude: longitude
								};
								console.log(_this.location, 9999);
								_this.refresh();
								_this.getGoodsList();
								_this.$forceUpdate();
							},
							fail: info => {
								//失败回调
								console.log(info);
							}
						});
					}
				});
			},
			// 去开启定位
			isokdingwei() {
				uni.setStorageSync('isGetLocation', 'yes')
				this.addressShow = false
				this.autoGetLocation();
				uni.setStorageSync('position', 'true');
			},
			// 刷新浏览量
			browseClick(item, i) {
				this.lists[i].click++
			},
			getAdImg() {
				this.$api.post(global.apiUrls.post5c94aa1a043e7, {
					typeid: 20
				}).then(res => {
					if (res.data.code == 1) {
						this.adImgs = res.data.data
						if (this.adImgs.length > 0) {
							this.showMode = true
						}
					}
				})
			},
			tabClick(e, type) {
				console.log('eeee', e)
				if (e.type == 1) {
					this.goods_type = e.id
					this.typeId = 0
				} else {
					this.goods_type = 0
					this.typeId = e.id
				}
				if (type) return;
				this.refresh();
			},
			scrolltolower(e) {
				let timer = null;
				clearTimeout(timer);
				this.isAni = false
				timer = setTimeout(() => {
					this.scrollLeft = 0
					this.isAni = true
				}, 2000)
			},
			// 开始滚动
			startScroll() {
				clearInterval(this.scrollTimer);
				this.scrollTimer = setInterval(() => {
					this.scrollLeft += 100
				}, 3000);
			},
			async scroll(e) {
				if (!e) {
					await this.scrolltolower();
					await this.startScroll();
				} else {
					let timeStamp = e.timeStamp.toFixed(0);
					if (this.scrollStartTime) {
						//判断是自动滚动还是鼠标滚动 是否在定时器的时间范围内
						if (timeStamp - this.scrollStartTime <= 2900) {
							clearInterval(this.scrollTimer);
							clearTimeout(this.scrollEndTimer);
							//记录当前的滚动距离
							// this.scrollLeft = e.detail.scrollLeft;
							//重新挂载滚动定时器
							this.scrollEndTimer = setTimeout(() => {
								this.startScroll();
								this.scrollLeft = e.detail.scrollLeft;
							}, 1500);
						}
					}
					this.scrollStartTime = timeStamp;
				}
			},
			getData() {
				this.$api.post(global.apiUrls.post5fc0cbfc71f70).then(res => {
					if (res.data.code == 1) {
						let arr = []
						arr = res.data.data.catagory
						console.log(arr)
						this.cateListsGory = arr
						
						// arr.unshift({
						// 	id: 0,
						// 	name: '全部'
						// })
						let lists = [{
								id: 0,
								name: '全部'
							},
							{
								id: 2,
								type: 1,
								name: '爆款推荐'
							},
							{
								id: 4,
								type: 1,
								name: '最新发布'
							}
						]
						// arr.unshift(lists)
						this.navList = [...lists, ...arr]
					}
				})
			},
			getList() {
				if (this.status != 'more') return;
				this.status = 'loading';
				console.log('选择的地址-----', this.location);
				this.weizhi = this.location.city
				this.$api.post(global.apiUrls.post5db113922d297, {
					cid: this.typeId,
					page: this.page,
					list_rows: this.size,
					is_goods_type: 1,
					lng: this.location.longitude,
					lat: this.location.latitude,
					goods_type: this.goods_type
				}).then(res => {
					if (res.data.code == 1) {
						// let total = res.data.data.total;
						let totalSize = res.data.data.total;
						this.totalSize = Math.ceil(totalSize / 10); // 悬浮按钮总页码
						let last_page = res.data.data.last_page;
						let list = res.data.data.data;
						if (this.page == 1) this.lists = [];
						this.lists.push(...list);
						if (this.page < last_page) {
							this.status = 'more';
							this.page++;
						} else {
							this.status = 'noMore';
						}
						console.log('列表', this.lists);
						uni.stopPullDownRefresh();
					} else {
						this.status = 'more';
						uni.stopPullDownRefresh();
					}
					this.size = 10
					this.isInit = true
				}).catch(() => {
					this.status = 'more';
					uni.stopPullDownRefresh();
				})
			},
			getGoodsList() {
				console.log("zaime")
				this.$api.post(global.apiUrls.post5db113922d297, {
					cid: 0,
					page: 1,
					list_rows: 10,
					is_goods_type: 1,
					lng: "",
					lat: "",
					goods_type: 0
				}).then(res => {
					if (res.data.code == 1) {
						this.lists = res.data.data.data
					}
				})
			},
			refresh() {
				this.page = 1;
				this.status = 'more';
				this.lists = []
				this.getList();
				this.getGoodsList();
			},
			kanjia(item, index) {
				if (item.stock == 0) {
					this.$message.info('该商品暂无库存')
					return;
				}
				this.$urouter.navigateTo({
					url: '/pages/goods/goodsdetail/goods-detail/index',
					params: {
						sku_id: item.sku_id || 0,
						goods_id: item.id
					}
				});
			},
			toDetail(item) {
				this.$urouter.navigateTo({
					url: '/pages/goods/goodsdetail/goods-detail/index',
					params: {
						sku_id: item.sku_id || 0,
						goods_id: item.id
					}
				});
			},
			// 获取高级搜索得索引列表
			getListData() {
				let data = {
					max_level: 1
				}
				this.$api.get(global.apiUrls.post5da6e49d7373a, data)
					.then(res => {
						if (res.data.code == 1) {
							data = res.data.data;
							// this.goodsServiceLabel = data.goodsServiceLabel;
							// this.brandList = data;
							this.typeList = data;
							// this.allTypeList = data.typeList
						} else {
							this.$message.error(res.data.msg);
						}
					})
			},
			// 分类筛选
			Choice(item, type) {
				// this.$set(item, 'selected', !item.selected);
				// this.getGoodNumber()
				if (type == 1) {
					this.typeId = item.id
				} else {
					this.goods_type = item.type
				}
			},
			resetPop() {
				this.typeId = 0
				this.goods_type = 0
			},
			confirmPop() {
				if (!this.typeId && !this.goods_type) {
					this.$message.info('请选择')
					return;
				}
				this.$refs.tabs.getActive();
				this.refresh();
				this.showDrawer = false
			},
			postVerifyInviteCode(inviteCode) {
				this.$api.post(global.apiUrls.postVerifyInviteCode, {
					invite_code: inviteCode
				}).then(res => {
					uni.setStorageSync('invite_code', inviteCode)
					if (res.data.code == 1) {
						this.$util.showModal({
							title: this.i18n['提示'],
							content: '恭喜您成为极光的会员',
							confirmColor: this.$store.state.themeColor,
							success: (res) => {
								if (res.confirm) {
									this.$util.debounce(this.$util.navigateToLogin, 800, true);
								} else {
									uni.removeStorageSync('invite_code')
								}
							}

						})
					} else {
						this.$message.info('该邀请码已失效')
					}
				}).catch(err => {})
			},
			toTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200,
				})
			},
			getConfig() {
				this.$api
					.post(global.apiUrls.getConfig, {
						code: 'operation'
					})
					.then(res => {
						if (res.data.code == 1) {
							global.thirdConfig = res.data.data;
							this.home_intro = res.data.data.home_intro;
						}
					})
					.catch(err => {});
			},
			/**
			 * @function
			 * @description 获取未读消息数量
			 */
			getMessageNum() {
				this.$api.post(global.apiUrls.postMessageNum).then(res => {
					if (res.data.code == 1) {
						this.messageNum = res.data.data.all;
						console.log(this.messageNum, 'oplkkjk')
					}
				});
			},
			/**
			 * @description 去选择城市页面
			 */
			goLcation() {
				uni.navigateTo({
					url: `/pages/index/select-location/index?city=${this.location.city}&lon=${this.location.longitude}&lat=${this.location.latitude}`
				});
			},
			/**
			 * @description 自动定位获取地理位置
			 * 这个定位只使用app，且不能获取code值，如果想和组件选择城市匹配，可以根据城市去城市js去查找对应code
			 * 或者引入三方sdk定位获取code
			 */
			/**
			 * @func 自动定位
			 */
			autoGetLocation() {
				let _this = this;
				console.log('自动定位');
				wx.getFuzzyLocation({
					// type: "wgs84",
					type: "gcj02",
					// isHighAccuracy:true,
					success: adr => {
						console.log(adr, 'adrrrrrrrrr')
						this.myAmapFun.getRegeo({
							location: adr.longitude + ',' + adr.latitude,
							success: data => {
								//成功回调
								console.log('自动定位 SDK回调', data);
								let regeoData = data[0].regeocodeData.addressComponent;
								this.city = Array.isArray(regeoData.city) && regeoData.city
									.length == 0 ? regeoData
									.province : regeoData.city;
								let latitude = data[0].latitude;
								let longitude = data[0].longitude;
								this.weizhi = regeoData.city
								uni.setStorageSync('Current_City', this.city)
								this.address = data[0].desc
								_this.$store.commit('updataLocation', {
									province: regeoData.province,
									city: this.city,
									district: regeoData.district,
									addressDesc: data[0].desc,
									provinceCode: regeoData.adcode.substr(0, 2) + '0000',
									cityCode: regeoData.adcode.substr(0, 4) + '00',
									districtCode: regeoData.adcode + '',
									latitude: latitude,
									longitude: longitude
								});
								_this.location = {
									province: regeoData.province,
									city: this.city,
									district: regeoData.district,
									addressDesc: data[0].desc,
									provinceCode: regeoData.adcode.substr(0, 2) + '0000',
									cityCode: regeoData.adcode.substr(0, 4) + '00',
									districtCode: regeoData.adcode + '',
									latitude: latitude,
									longitude: longitude
								};
								if (_this.userInfo && _this.userInfo.id) {
									_this.$api.post(global.apiUrls.post653dcf832dba7).then(res => {
										console.log('获取地址', res);
										if (res.data.code == 1) {
											let addressData = res.data.data
											if (!addressData.lat && !addressData.lng) {
												_this.setUserAddress(this.city, longitude,
													latitude)
											} else if (addressData.location_city != this
												.city) {
												_this.addressTypeShow = true
											}
										}
									})
								}

								if (_this.whetherAddress) {
									_this.setUserAddress(this.city, longitude, latitude)
								}
								_this.refresh();
								_this.$forceUpdate();
							},
							fail: info => {
								uni.setStorageSync('isGetLocation', 'no')
								//失败回调
								console.log(info, 'errrr');
							}
						});
					}
				});
			},
			setUserAddress(city, lng, lat) {
				let setAddressData = {
					location_city: city,
					lng: lng,
					lat: lat
				}
				this.$api.post(global.apiUrls.post653dd01ad1070, setAddressData).then(res => {
					console.log('设置地址', res);
					if (res.data.code == 1) {
						this.whetherAddress = false
					}
				})
			},
			getFindData() {
				this.$api
					.post(global.apiUrls.postSearchHistoryRecommend, {
						user_id: (global.userInfo && global.userInfo.id) || ''
					})
					.then(res => {
						if (res.statusCode == 200 && res.data.code == 1) {
							this.searchText = res.data.data[0].name || this.i18n['搜索你想要的商品'];
						}
					})
					.catch(err => {
						console.log('err: ' + JSON.stringify(err));
					});
			},
			// 首页数据
			loadData() {
				this.getSwiper();
				this.getData();
				// this.getList();
				// this.getGoodsList();
			},
			// 去搜索
			navToSearch() {
				this.$urouter.navigateTo('/pages/index/search/search/index?name=' + this.searchText);
			},
			// 轮播图
			getSwiper() {
				this.$api
					.post(global.apiUrls.postAdvert, {
						typeid: 1
					})
					.then(res => {
						res = res.data;
						console.log('轮播图数据', res);
						if (res.code == 1) {
							this.banners = res.data;
							this.changeColor(res.data[0].rgb);
						}
					})
					.catch(err => {
						console.error(err);
					});
			},
			// 改变颜色
			changeColor(e) {
				const color = `rgb(${e[0]},${e[1]},${e[2]})`;
				this.bgColor = color;
				var animation = uni.createAnimation({
					duration: 700,
					timingFunction: 'linear'
				});
				this.animation = animation;
				animation.backgroundColor(this.bgColor).step();
				this.animationData = animation.export();
			},
			// 获取全局配置
			getGlobalConfig() {
				this.$api
					.post(global.apiUrls.postGetConfig, {
						code: 'user.is_invite_code'
					})
					.then(res => {
						// console.log("全局配置", res.data);
						if (res.data.code == 1) {
							uni.setStorageSync('is_invite_code', res.data.data);
						}
					});
			},
			// postSearchScanCode
			handleScan() {
				const that = this;
				uni.scanCode({
					scanType: ['barCode'],
					success: function(response) {
						that.$api
							.post(global.apiUrls.postSearchScanCode, {
								sn: response.result
							})
							.then(res => {
								if (res.data.code == 1 && res.data.data.list.length > 0) {
									that.$urouter.navigateTo({
										url: '/pages/goods/goodsdetail/goods-detail/index',
										params: {
											goods_id: res.data.data.list[0].id,
											sku_id: res.data.data.list[0].sku_id || 0
										}
									});
								} else {
									this.$message.info({
										content: this.i18n['暂无相关数据']
									});
								}
							})
							.catch(err => {
								console.log('err: ' + JSON.stringify(err));
								this.$message.info({
									content: this.i18n['暂无相关数据']
								});
							});
					}
				});
			},
			// 切换弹窗
			beginSwitchModel() {
				let data = this.models[this.showModelIndex];
				console.log(this.models);
				if (this.showModelIndex >= this.models.length) return;
				if (data) {
					switch (this.showModelIndex) {
						case 0:
							this.noticeModel = true;
							break;
						case 1:
							this.couponModel = true;
							break;
						case 2:
							this.activityModel = true;
							break;
					}
				} else {
					this.showModelIndex++;
					this.beginSwitchModel();
				}
			},
			// 弹窗关闭回调
			handleCloseCb() {
				// console.log("关闭回调");
				this.showModelIndex++;
				// setTimeout(() => {
				this.beginSwitchModel();
				// },300);
			},
			// 关闭弹窗
			closeModel(type) {
				this[type] = false;
			},
			navTo(path, auth) {
				console.log(path)
				console.log(auth)
				if (auth) {
					this.$util.actionAuth(() => {
						if (path.includes('type=tabbar')) {
							uni.switchTab({
								url: path
							})
						} else if (path.includes('isLogin=true')) {
							this.$util.actionAuth(() => {
								uni.navigateTo({
									url: path
								});
							})
						} else {
							uni.navigateTo({
								url: path
							})
						}
					});
				} else {
					if (path.includes('type=tabbar')) {
						uni.switchTab({
							url: path
						})
					} else if (path.includes('isLogin=true')) {
						this.$util.actionAuth(() => {
							uni.navigateTo({
								url: path
							});
						})
					} else {
						console.log(path, 'ddd')
						uni.navigateTo({
							url: path
						})
					}
				}
			},

		}
	};
</script>
<style lang="scss" scoped>
	.store-image{
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
		flex-shrink: 0;
		margin-right: 10rpx;
	}
	.store-title{
		font-size: 12px;
		color: #808080;
		margin-bottom: 20rpx;
	}
	.store-item-right{
		display: flex;
		flex-direction: column;
		width:550rpx;
		flex: 1;
		justify-content: space-between;
	}
	.store-item{
		padding: 30rpx;
		background-color: #ffffff;
		// border-radius: 20rpx;
		display: flex;
		align-items: center;
		width: 710rpx;
		justify-content: space-between;
	}
	.shop {
		justify-content: space-between;
		width: 720rpx;
		display: flex;
		height: 200rpx;
	}
	
	.store-title{
		font-size: 15px;
		font-weight: bold;
		color: #333333;
		margin-top: 30rpx;
	}
	.search-btn{
		width: 120rpx;
		height: 60rpx;
		background: linear-gradient( 180deg, #FF7EAA 0%, #F63879 100%);
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 13px;
		color: #ffffff;
		margin-left: 10rpx;
	}
	.search-image-view{
		width: 30rpx;
		height: 30rpx;
		flex-shrink: 0;
		margin: 5rpx 20rpx 0 0rpx;
	}
	.search-view{
		flex: 1;
		border: 1px solid #F973B1;
		border-radius: 20rpx;
		background: linear-gradient( 90deg, #FFFCFF 0%, #FFD7DF 100%) !important;
		z-index: 1000;
		display: flex;
		align-items: center;
		// padding: 20rpx;
		padding: 8rpx;
		font-size: 15px;
		color: #999999;
	}
	.header-view{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		font-size: 16px;
		color: #333333;
		margin: 0;
	}
	.scroll-view-text{
		font-size: 15px;
		color: #333333;
	}
	.scroll-view-image{
		width: 100rpx !important;
		height: 100rpx !important;
		flex-shrink: 0;
		margin-bottom: 10rpx;
	}
	.scroll-view-item{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		// background-color: #f4f4f4;
		border-radius: 10rpx;
		padding: 0 20rpx;
		// width: 200rpx;
		// height: 150rpx;
	}
	.scroll-view-list{
		display: flex;
		align-items: center;
	}
	
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		background-color: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		margin-top: 30rpx;
	}

	.address-box {
		width: 480rpx;
		height: 360rpx;
		background-color: #fff;
		border-radius: 28rpx;
		position: relative;
	}

	.address-content {
		width: 100%;
		height: 280rpx;
		padding: 24rpx;
		color: #000;
		text-align: center;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.address-bent {
		width: 100%;
		position: absolute;
		bottom: 0;
		border-top: 1rpx solid #eee;
	}

	.address-text {
		flex: 1;
		height: 90rpx;
		line-height: 90rpx;
		color: #ff6f27;
		font-weight: 600;
		text-align: center;
	}

	.kaiqiweizhi-button {
		padding: 8rpx 12rpx;
		line-height: 1;
		background-color: #64BF1D;
		color: #fff;
		font-size: 30rpx;
		border-radius: 12rpx;
		margin-left: 12rpx;
	}

	.kaiqiweizhi {
		position: fixed;
		left: 24rpx;
		right: 24rpx;
		width: calc(100% - 48rpx);
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 18rpx;
		padding: 0 24rpx;
		background: rgba(0, 0, 0, 0.4);
		z-index: 999;
		font-size: 24rpx;
		color: #fff;
	}

	.container {
		padding: 20rpx;
		overflow: hidden;
		width: 100%;
		min-height: 100vh;
		background: url('https://localelife.chunchuangkeji.cn/static/home_bg.jpg') no-repeat;
		background-size:100% 100%;
		// .cu-bar {
		// 	justify-content: center;
		// }
	}

	/deep/ .fu-page {
		border-bottom: 0;
	}

	.head {
		position: sticky;
		top: 0;
		width: 100%;
		background: url(https://localelife.chunchuangkeji.cn/h5img/images/bg-2.png) no-repeat center / cover;
		z-index: 99;

		.address {
			margin-top: 12rpx;
			padding: 0 24rpx;

			.left {
				color: #fff;
				font-size: 28rpx;
				font-weight: 600;

				.addr {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
			}

			.right {
				.icon {
					width: 40rpx;
					height: 40rpx;
					margin-left: 32rpx;
				}
			}
		}
	}

	.scroll-x {
		margin-top: 40rpx;

		.kj-box {
			padding: 0 32rpx;

			.item {
				width: 280rpx;
				border-radius: 8rpx;
				background-color: #fff;
				margin-right: 24rpx;
				flex-shrink: 0;

				&:last-of-type {
					margin-right: 0;
				}

				.show {
					width: 100%;
					height: 280rpx;
					position: relative;
					overflow: hidden;

					.img {
						width: 100%;
						height: 100%;
						border-radius: 8rpx 8rpx 0 0;
					}

					.name {
						background: url(https://localelife.chunchuangkeji.cn/h5img/images/bg-3.png) no-repeat center / cover;
						position: absolute;
						bottom: 0;
						width: 100%;
						height: 47rpx;
						left: 0;
						font-size: 24rpx;
						padding: 0 8rpx;
						line-height: 47rpx;
						font-weight: 500;
						color: #fff;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.price {
					padding: 0 8rpx;
					margin-top: 8rpx;
					align-items: baseline;

					.text-price {
						color: #FF5C5C;
						font-weight: bold;
					}

					.text-through {
						color: #999;
						font-size: 20rpx;
						margin-left: 12rpx;
					}
				}

				.btn {
					width: 140rpx;
					height: 48rpx;
					margin: 16rpx auto;
					text-align: center;
					line-height: 48rpx;
					background-color: #FF6F27;
					border-radius: 28rpx;
					font-size: 24rpx;
					color: #fff;
					font-weight: 500;

					&.share {
						background-color: rgba(255, 111, 39, 0.10);
						border: 1rpx solid #FF6F27;
						color: #FF6F27;
					}

					&.over-btn {
						background-color: #999;
					}
				}
			}
		}
	}

	.tabs {
		position: sticky;
		z-index: 99;
		padding-right: 98rpx;
		background-color: #fff;
		margin-top: 32rpx;

		.right {
			position: absolute;
			width: 98rpx;
			height: 40rpx;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto 0;

			.yinying {
				width: 18rpx;
				height: 40rpx;
			}

			.shaixuan {
				width: 88rpx;
				background-color: #fff;
				margin-left: -8rpx;
				z-index: 2;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-left: 16rpx;
				}
			}
		}
	}

	.list {
		padding: 0 16rpx;
		background-color: #fff;
	}

	.video-box1 {
		width: 100%;
		height: 493rpx;
		// background-image: url($IMG_BASE_URL+'tab/video-bg1.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
	}

	.video-box {
		margin: 12rpx 32rpx 0 32rpx;
		height: 416rpx;
		width: 686rpx;
		// background-image: url($IMG_BASE_URL+'tab/video-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		video {
			width: 671rpx;
			height: 390rpx;
		}
	}


	.hot-item {
		// background-image: url($IMG_BASE_URL+'tab/hot-item.png');
		background-repeat: no-repeat;
		height: 381rpx;
		background-size: 100% 100%;
		width: 100%;
		margin-bottom: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 676rpx;
			height: 369rpx;
		}
	}

	.advert-box {
		height: 300rpx;
		margin: 0 32rpx;
		display: flex;

		image {
			width: 100%;
			height: 100%;
		}
	}

	// .home-bg {
	// 	background-image: url($IMG_BASE_URL+'tab/home-bg.png');
	// 	background-repeat: no-repeat;
	// 	background-size: 100% 100%;
	// 	width: 100vw;
	// 	height: 443rpx;
	// }


	.top-logo {
		width: 40rpx;
		height: 32rpx;
	}

	.logo-name {
		width: 74rpx;
		height: 32rpx;
	}

	.msg-box {
		position: relative;
		margin-left: 40rpx;

		.msg-icon {
			width: 64rpx;
			height: 64rpx;
			min-width: 64rpx;
		}

		.msg-tip {
			background-color: #FD433C;
			color: #ffffff;
			width: 32rpx;
			height: 32rpx;
			font-size: 20rpx;
			// padding: 2rpx 4rpx;
			border-radius: 50%;
			text-align: center;
			line-height: 32rpx;
			position: absolute;
			right: -10rpx;
			top: 0;
		}
	}

	.life_type {
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;

		.life_title {
			font-size: 24rpx;
			text-align: center;
			color: #ffffff;
			padding-right: 10rpx;
		}

		.life_item {
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: space-between;
			flex-wrap: nowrap;

			.items {
				width: 140rpx;
				height: 40rpx;
				border-radius: 20rpx;
				background: rgba(221, 221, 221, 0.5);
				font-size: 24rpx;
				text-align: center;
				color: #ffffff;
				line-height: 40rpx;
			}
		}
	}

	.cu-bar {
		// background-image: url(../static/home-bg.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
		box-shadow: none !important;
	}

	.search {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		// margin-left: 24rpx;
		// z-index: 9999999;
		margin-left: 32rpx;
		margin-right: 32rpx;

		.search-form {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 74upx;
			border-radius: 37rpx;
			background-color: #f9f9f9;
			width: 100%;
			// margin-left: 24rpx;

			.search-icon {
				width: 28rpx;
				height: 28rpx;
				margin-left: 32rpx;
			}

			.search-text {
				background-color: $bgtheme;
				color: #FFFFFF;
				height: 60rpx;
				width: 138rpx;
				line-height: 60rpx;
				text-align: center;
				border-radius: 30rpx;
				margin-right: 10rpx;
			}
		}
	}

	.header {
		height: 100rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;

		.header-search {
			width: 690rpx;
			height: 64rpx;
			background-color: rgba(246, 246, 246, 1);
			padding: 0 24rpx;
			display: flex;
			align-items: center;
			font-family: 'PingFang SC';
			border-radius: 34rpx;
			color: #bfbfbf;
		}

		.header-message {
			display: flex;
			align-items: center;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}

	.swiper-wrap {
		position: relative;
		overflow: hidden;
		width: 686rpx;
		height: 320rpx;
		// padding: 32rpx 24rpx 20rpx 24rpx;
		margin: 32rpx;
		box-sizing: border-box;

		.swiper-bg {
			height: 200rpx;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			border-radius: 0 0 50% 50%;
		}
	}

	.banner-wrap {
		position: relative;
		overflow: hidden;
	}

	.banner-box {
		background-size: cover;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.banner-info {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			margin-left: 154rpx;

			.banner-info-title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #f2d7bd;
			}

			.banner-info-sub {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #eae8e7;
				margin-top: 10rpx;
			}
		}

		.banner-action {
			width: 155rpx;
			height: 56rpx;
			background: linear-gradient(63deg, rgba(247, 226, 191, 1) 0%, rgba(227, 186, 153, 1) 100%);
			opacity: 1;
			border-radius: 28rpx;
			margin-right: 34rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(21, 33, 43, 1);
			line-height: 56rpx;
			text-align: center;
		}
	}

	.model-notice-box {
		width: 500rpx;

		.title {
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 32rpx;
		}

		.content {
			padding: 0 32rpx 50rpx;
			color: #666666;
			font-size: 28rpx;
		}

		.bottom {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			color: $theme;
			font-size: 28rpx;
		}
	}

	.banner-floor {
		height: 240rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.notice-wrap {
		background-color: #f8f8f8;
		display: flex;
		height: 64rpx;
		align-items: center;
		padding: 0 16rpx;

		.swiper-box {
			height: 64rpx;
			width: 100%;

			.swiper-item {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				// .swiper-item-text{
				// 	width: 100%;
				// }
			}
		}
	}

	.block-38 {
		width: 38rpx;
		height: 38rpx;
	}

	.block-30 {
		width: 30rpx;
		height: 30rpx;
	}

	.block-250 {
		width: 224rpx;
		min-width: 224rpx;
		height: 224rpx;
		min-height: 224rpx;
	}

	.className {
		margin: 0;
		font-size: 22rpx;
	}

	.block-7828 {
		width: 78rpx;
		height: 28rpx;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.buy-notice {
		position: fixed;
		left: 50rpx;
		z-index: 999;
	}

	.info {
		height: 30rpx;

		.info-title {
			width: 80rpx;
			line-height: 30rpx;
			text-align: center;
		}

		.info-number {
			width: 70rpx;
			line-height: 22rpx;
			text-align: center;
			border: 4rpx solid $fu-main-color;
			border-left: none;
		}
	}

	.titles {
		padding: 20rpx 32rpx;

		.name {
			font-size: 40rpx;
			line-height: 48rpx;
			color: #333333;
			font-weight: bold;

			image {
				width: 34rpx;
				height: 34rpx;
				margin-right: 18rpx;
			}
		}

		.desc {
			width: 120rpx;
			height: 46rpx;
			background: $bgtheme;
			font-size: 24rpx;
			color: #ffffff;
			line-height: 46rpx;
			text-align: center;
			border-radius: 23rpx;
		}
	}

	.top-tab {
		width: 100%;
		height: 100upx;
		background-color: #ffffff;

		.title {
			font-style: italic;
		}

		.tab-item {
			.time {
				color: #373737;
				font-size: 30rpx;
				line-height: 34rpx;

				&.active {
					color: $theme;
					font-size: 40rpx;
				}
			}

			.state {
				color: #999999;
				font-size: 20rpx;
				line-height: 32rpx;
				margin-top: 10rpx;

				&.active {
					width: 120rpx;
					height: 32rpx;
					background: $bgtheme;
					text-align: center;
					border-radius: 20rpx;
					color: #ffffff;
				}
			}
		}

		.current {}
	}

	.sckill-list {
		height: 876rpx;
	}

	.guess {
		width: 100%;
		text-align: center;
		font-size: 40rpx;
	}

	.guesstitles {
		background: #fafafa;
	}

	.block-24 {
		width: 24rpx;
		min-width: 24rpx;
		height: 24rpx;
		min-height: 24rpx;
	}

	ben-search-swiper {
		width: 100%;
	}

	.float-banner {
		width: 240rpx;
		height: 235rpx;
		position: fixed;
		bottom: 240rpx;
		z-index: 996;
		transition: all 0.35s ease-in-out;

		image {
			width: 100%;
			height: 100%;
		}

		.close-btn {
			width: 36rpx;
			height: 36rpx;
			line-height: 36rpx;
			background-color: rgba(200, 200, 200, 0.8);
			text-align: center;
			position: absolute;
			display: flex;
			align-items: center;
			border-radius: 50%;
			font-size: 24rpx;
			justify-content: center;
			color: #ffffff;
			top: 20rpx;
			right: 46rpx;
			z-index: 996;
		}
	}

	.live-box {
		width: 686rpx;
		height: 199rpx;
		position: relative;

		.live-item {
			position: absolute;
			width: 145rpx;
			height: 145rpx;
			top: 28rpx;
			left: 38rpx;
			background-color: rgba(255, 255, 255, 0.5);
			z-index: 99;
			border-radius: 28rpx;
			overflow: hidden;

			.swiper {
				width: 100%;
				height: 100%;
			}
		}
	}

	.placeholderStyle {
		font-size: 26rpx;
		color: grey;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #999999;
	}


	.model-activity-box {
		width: 600rpx;

		image {
			width: 100%;
		}

		.model-activity-box-close {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 50rpx;
			color: rgba(255, 255, 255, 0.6);
		}
	}

	.top-bg {
		width: 100%;
		height: 1334rpx;
		position: relative;

		.bottom-up {
			position: absolute;
			bottom: 32rpx;
			width: 100%;

			text {
				font-size: 36rpx;
				margin-top: 32rpx;
				// font-weight: bold;
				color: #ffffff;
			}
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	.hot-list {
		padding: 0 32rpx;
	}

	.right-box {
		position: fixed;
		right: 24rpx;
		bottom: 500rpx;
		z-index: 999;
	}

	.pop-content {
		height: 92%;
		padding: 20rpx;
		padding-bottom: 120rpx;
	}

	.list-item {
		background-color: #F5F5F5;
		display: inline-block;
		margin-bottom: 20rpx;
	}

	.serviceItem {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;

		text {
			width: 31%;
			margin: 0 0 16rpx 0;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 20rpx;
		}
	}

	.service {
		margin-top: 20rpx;
	}

	.price-round {
		padding: 20rpx 10rpx;

		.round {
			padding: 10rpx 0;
			text-align: center;
			background: #fff;
			border: 1px solid #ccc;
		}
	}

	.price-round input {
		font-size: 24rpx;
		height: 50rpx;
		padding: 0 60rpx;
	}

	.border-center {
		height: 50rpx;
		margin: 0 15rpx;
	}

	.action-box {
		position: fixed;
		bottom: 40rpx;
		width: 100%;

		.pop-btn {
			margin: 0 24rpx;
		}

		.action {
			flex: 1;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 62rpx 0px 0px 62rpx;
			;
			font-size: 24rpx;
			text-align: center;
		}

		.action+.action {
			margin-left: 4rpx;
			border-radius: 0px 62px 62px 0px;
		}

		.reset {
			color: #fff;
			background-color: #FFA933;
		}

		.confirm {
			color: #FFFFFF;
			background: #FF6F27;
		}
	}

	.active2 {
		box-shadow: inset 0 0 2rpx 2rpx #FF6F27;
		background-color: rgba(255, 111, 39, 0.1) !important;
		color: #FF6F27;
	}

	.arrow-b {
		width: 22rpx;
		height: 12rpx;
	}

	.model-box {
		border-radius: 16rpx;
		width: 750rpx;
		height: calc(100vh - 50rpx);
		padding: 0 10rpx;
		position: relative;

		.img {
			width: 100%;
			// height: 100%;
		}
	}

	.block-44 {
		width: 60rpx;
		height: 60rpx;
	}

	.two-list {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		width: 330rpx;
		height: 220rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 14rpx 1rpx rgba(0, 0, 0, 0.16);
		border-radius: 14rpx 14rpx 14rpx 14rpx;

	}
</style>